<!DOCTYPE html>
<!-- saved from url=(0039)http://font.baidu.com/editor/empty.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>fonteditor</title>
    <script src="./corner_files/hm.js"></script><script>
    var _hmt = _hmt || [];
    /baidu.com$/.test(location.hostname) && (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?65ce30cdeda584c416e39648915689f7";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
</head>
<body data-pinterest-extension-installed="cr1.40"><style>*{margin:0;padding:0;list-style:none}blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif}h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:courier new,courier,monospace}small{font-size:12px}ol,ul{list-style:none}a{text-decoration:none}a:hover{text-decoration:underline}legend{color:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}.main{padding:30px 100px}.main h1{font-size:36px;color:#333;text-align:left;margin-bottom:30px;border-bottom:1px solid #eee}.helps{margin-top:40px}.helps pre{padding:20px;margin:10px 0;border:solid 1px #e7e1cd;background-color:#fffdef;overflow:auto}.iconfont-list{overflow:hidden}.iconfont-list li{float:left;width:100px;height:150px;text-align:center}.iconfont-list .icon{font-size:42px;line-height:100px;margin:10px 0;color:#333;font-style:normal;-webkit-transition:font-size .25s ease-out 0s;-moz-transition:font-size .25s ease-out 0s;transition:font-size .25s ease-out 0s}.iconfont-list .icon:hover{font-size:100px}.iconfont-list .code{color:#008000;font-weight:bold}</style>
<style>
    @font-face {
        font-family: 'fonteditor';
        
        src: url(data:font/ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMkiTZ6gAAACsAAAAYGNtYXDyGOXTAAABDAAAAVJnbHlmJXUGNAAAAmAAAADUaGVhZAr8ouQAAAM0AAAANmhoZWEHwwOJAAADbAAAACRobXR4EiUBgAAAA5AAAAAUbG9jYQCcAMwAAAOkAAAADG1heHAACAAZAAADsAAAACBuYW1lGVKlzAAAA9AAAAGtcG9zdDjdfHcAAAWAAAAATAAEA6EBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAgAGAwAAAAAAAAAAAAEQAAAAAAAAAAAAAABQZkVkAMDyAPIDAyz/LABcAywA1AAAAAEAAAAAAxgAAAAAACAAAQAAAAMAAAADAAAAHAABAAAAAABMAAMAAQAAABwABAAwAAAACAAIAAIAAPIB8gLyA///AADyAPIC8gP//w4BDgIOAAABAAAAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAiAAABMgKqAAMABwAANxEhESczESMiARDuzMwAAqr9ViICZgAAAAEAUP/OA+UCkAAYAAABFhcWFwYHBgchKwEGFxYXJicmJz4BNzsBAuRsSkgDA0hIbP7YAmw/Dw8bbkVFAgTHlgkIApADS0twcEtLAjAzMxslXF17mcwEAAABAB4AtAQbAZsAAwAAAQchJwEE5gP95QGb5+cAAQCgALQDaQGZAAMAAAEHIScBhOQCyeUBmeXlAAEAUAC0A+gBmgADAAABByEnATbmA5jmAZrm5gABAAAAAQAA9eRLnl8PPPUACwQAAAAAANPRibgAAAAA09LVtwAe/84EGwKqAAAACAACAAAAAAAAAAEAAAMs/ywAXAQ5AB4AHgQbAAEAAAAAAAAAAAAAAAAAAAAFAXYAIgQ1AFAEOQAeBAkAoAQ4AFAAAAAUAEAATgBcAGoAAQAAAAUAGQACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAlgABAAAAAAABAAoAAAABAAAAAAACAAYACgABAAAAAAADABsAEAABAAAAAAAEAAoAKwABAAAAAAAFAB4ANQABAAAAAAAGAAoAUwADAAEECQABABQAXQADAAEECQACAAwAcQADAAEECQADADYAfQADAAEECQAEABQAswADAAEECQAFADwAxwADAAEECQAGABQBA2ZvbnRlZGl0b3JNZWRpdW1Gb250RWRpdG9yIDEuMCA6IGZvbnRlZGl0b3Jmb250ZWRpdG9yVmVyc2lvbiAxLjA7IEZvbnRFZGl0b3IgKHYxLjApZm9udGVkaXRvcgBmAG8AbgB0AGUAZABpAHQAbwByAE0AZQBkAGkAdQBtAEYAbwBuAHQARQBkAGkAdABvAHIAIAAxAC4AMAAgADoAIABmAG8AbgB0AGUAZABpAHQAbwByAGYAbwBuAHQAZQBkAGkAdABvAHIAVgBlAHIAcwBpAG8AbgAgADEALgAwADsAIABGAG8AbgB0AEUAZABpAHQAbwByACAAKAB2ADEALgAwACkAZgBvAG4AdABlAGQAaQB0AG8AcgAAAAACAAAAAAAAADIAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAUAAAECAQMBBAEFB3VuaUYyMDAHdW5pRjIwMQd1bmlGMjAzB3VuaUYyMDI=) format('truetype');
        
    }
    .icon {
        font-family: 'fonteditor';
    }
</style>
<div class="main">
    <h1>预览ttf格式字体</h1>
    <ul class="iconfont-list">
        
        <li>
            <i class="icon"></i>
            <div class="code">\f200</div>
            <div class="name">uniF200</div>
        </li>
        
        <li>
            <i class="icon"></i>
            <div class="code">\f201</div>
            <div class="name">uniF201</div>
        </li>
        
        <li>
            <i class="icon"></i>
            <div class="code">\f203</div>
            <div class="name">uniF203</div>
        </li>
        
        <li>
            <i class="icon"></i>
            <div class="code">\f202</div>
            <div class="name">uniF202</div>
        </li>
        
    </ul>
    <div class="helps">第一步：使用font-face声明字体
<pre>@font-face {
    font-family: 'fonteditor';
    src: url('fonteditor.eot'); /* IE9*/
    src: url('fonteditor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonteditor.woff') format('woff'), /* chrome、firefox */
    url('fonteditor.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('fonteditor.svg#uxfonteditor') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用fonteditor的样式
<pre>.fonteditor {
    font-family: "fonteditor" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-tree:after {content: '\33';}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>    &lt;i class="fonteditor"&gt;&amp;#x33&lt;/i&gt;

or

    &lt;i class="fonteditor icon-three"&gt;&lt;/i&gt;
</pre>
</div>
</div>
</body></html>